/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<view class="signin">
			<div class="signin_top">
				<view class="top_btn">
					<i class=""></i>
					{{ signInfo.today ? $t("今日已签到") : $t("今日未签到") }}
				</view>
				<span>{{ $t("已连续签到") }}{{ signInfo.continuous }}{{ $t("天") }}，{{
            $t("总签到")
          }}{{ signInfo.total }}{{ $t("天") }}</span>
			</div>
			<div class="sing_date">
				<div class="sing_mask" v-if="showCalendar">
					<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false"
						@change="change" @monthSwitch="monthSwitch" />
					<view class="tsp"><span></span>
						<text href="javascript:;" @click="getnav('/pagesB/my/record')">{{
              $t("签到记录")
            }}</text>
					</view>
				</div>
			</div>
			<div class="steps">
				<div class="ad_til">{{ $t("连续签到有礼") }}</div>
				<div class="ad_pil">{{ $t("每日签到领积分") }}</div>
				<div class="date_step al">
					<div class="" v-for="(time, index) in signInfo.guize" :key="index" @click="typesignin(time.today)">
						<span><i class="iconfont icon_e7c3"></i></span>
						<span>{{ time.today }}{{ $t("天") }}</span>
						<div class="date_title">
							{{ $t("领取") }}<br />
							{{ time.num }}{{ $t("积分") }}
						</div>
					</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1: true,
				// sing_arr:[], // 当前月份签到的天数 数组
				data: "", // 当前点击的 天数,
				signInfo: {}, // 签到信息
				valueStatus: 0, // 更新页面状态 防止页面卡死
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: [],
				},
			};
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			this.getSignInfo();
		},
		methods: {
			change(e) {
				console.log("change 返回:", e);
				const {
					date
				} = e;
				let params = {
					type: 0,
					date,
				};
				this.dosign(params);
			},
			monthSwitch(e) {
				console.log("monthSwitchs 返回:", e);
			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
			typesignin: function(num) {
				let data = {
					type: 1,
					days: num,
				};
				this.dosign(data);
			},
			getSignInfo() {
				this.$http.getSignInfo().then((res) => {
					if (res.status === 200) {
						this.signInfo = res.data;
						const {
							sign_list
						} = res.data;
						const _sign_list = sign_list.map(res => {
							return {
								date: res,
								info: '已打卡'
							}
						})
						this.$set(this.info, 'selected', _sign_list)
					}
				});
			},
			// 点击签到
			dosign(data) {
				this.$http.getdosign(data).then((res) => {
					if (res.status == 200) {
						this.$toast(res.mess);
						this.getSignInfo();
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.al {
		display: flex;
		justify-content: space-between;
	}

	.sing_date {
		// height: 800rpx;
		position: relative;
		height: 410px;

		.sing_mask {
			width: 690rpx;
			position: absolute;
			top: -80px;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 20px;
			box-shadow: 0px 2px 20px rgba(255, 111, 107, 0.2);
			padding: 20rpx 0;
			background-color: #fff;

			.tsp {
				display: flex;
				justify-content: flex-end;
				padding: 10px;
				color: #666;
			}
		}
	}

	.index_class .signin .sing_date .sing_mask {
		padding: 20px 0 10px;
	}

	/deep/ .uni-calendar__header-text {
		font-weight: 600;
		font-size: 16px;
	}
	
	/deep/ .uni-calendar__weeks-item{
		.uni-calendar-item--isDay{
			background-color: #f96651;
			border-radius: 100rpx;
			
			.uni-calendar-item--extra{
				color: #FFF;
			}
		}
		
	}  
	
</style>
